<template>
	<view class="page">
		<view class="header">
			<text class="title">拼团成功</text>
		</view>
		
		<view class="content">
			<view class="group-members">
				<view class="member leader">
					<image class="avatar" src="/static/svg/default-avatar.svg" mode="aspectFill"></image>
					<image class="leader-badge" src="/static/svg/group-leader.svg" mode="aspectFill"></image>
				</view>
				<view class="member">
					<image class="avatar" src="/static/svg/default-avatar.svg" mode="aspectFill"></image>
				</view>
			</view>
			
			<view class="success-message">
				<image class="icon" src="/static/svg/check-circle.svg" mode="aspectFit"></image>
				<text class="message">拼团成功，我们会尽快为您发货</text>
			</view>
			
			<view class="action-buttons">
				<button class="btn view-order" @click="viewOrder">查看订单</button>
				<button class="btn return-home" @click="returnHome">返回首页</button>
			</view>
		</view>
		
		<view class="recommend-section">
			<view class="section-title">好物拼团推荐</view>
			
			<view class="product-list">
				<view class="product-card" v-for="(item, index) in recommendList" :key="index" @click="goToDetail(item)">
					<view class="product-image">
						<image :src="item.image || '/static/default-recommend.png'" mode="aspectFill"></image>
						<view class="group-tag">{{item.groupSize}}人团</view>
					</view>
					<view class="product-info">
						<text class="product-name">{{item.name}}</text>
						<text class="sold-info">已拼{{item.soldCount}}件</text>
						<view class="price-group">
							<text class="price">¥{{item.price}}</text>
							<view class="members-avatars">
								<image class="small-avatar" v-for="(avatar, idx) in item.avatars" :key="idx" :src="avatar || '/static/svg/default-avatar.svg'"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const recommendList = ref([
	{
		id: 1,
		name: '艾丽苏抹茶蛋糕早点低糖健康',
		price: '136',
		image: '/static/svg/cake.svg',
		soldCount: 536,
		groupSize: 3,
		avatars: ['/static/svg/default-avatar.svg', '/static/svg/default-avatar.svg']
	},
	{
		id: 2,
		name: '艾丽苏抹茶蛋糕早点低糖健康',
		price: '136',
		image: '/static/svg/cake.svg',
		soldCount: 536,
		groupSize: 3,
		avatars: ['/static/svg/default-avatar.svg', '/static/svg/default-avatar.svg']
	},
	{
		id: 3,
		name: '艾丽苏抹茶蛋糕早点低糖健康',
		price: '136',
		image: '/static/svg/cake.svg',
		soldCount: 536,
		groupSize: 3,
		avatars: ['/static/svg/default-avatar.svg', '/static/svg/default-avatar.svg']
	}
]);

const viewOrder = () => {
	uni.navigateTo({
		url: '/pages/my/order/index'
	});
};

const returnHome = () => {
	uni.switchTab({
		url: '/pages/index/index'
	});
};

const goToDetail = (item) => {
	uni.navigateTo({
		url: `/pages/goods/detail?id=${item.id}`
	});
};
</script>

<style>
.page {
	min-height: 100vh;
	padding: 30rpx;
	background-color: #f8f8f8;
}

.header {
	text-align: center;
	margin: 20rpx 0 40rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.content {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 40rpx;
	margin-bottom: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.group-members {
	display: flex;
	justify-content: center;
	margin-bottom: 40rpx;
}

.member {
	position: relative;
	margin: 0 10rpx;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	background-color: #f0f0f0;
}

.leader-badge {
	position: absolute;
	top: -10rpx;
	left: -10rpx;
	width: 60rpx;
	height: 40rpx;
}

.success-message {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.message {
	font-size: 32rpx;
	color: #666;
}

.action-buttons {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.btn {
	flex: 1;
	margin: 0 20rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	text-align: center;
}

.view-order {
	background-color: #8B8BFF;
	color: #fff;
}

.return-home {
	background-color: #fff;
	color: #666;
	border: 1px solid #ddd;
}

.recommend-section {
	margin-top: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.product-list {
	display: flex;
	flex-direction: column;
}

.product-card {
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
	display: flex;
}

.product-image {
	position: relative;
	width: 180rpx;
	height: 180rpx;
	margin-right: 20rpx;
}

.product-image image {
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
}

.group-tag {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #FF6B35;
	color: #fff;
	padding: 4rpx 12rpx;
	font-size: 22rpx;
	border-radius: 0 8rpx 0 8rpx;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
	margin-bottom: 10rpx;
}

.sold-info {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.price-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.price {
	font-size: 32rpx;
	color: #FF6B35;
	font-weight: bold;
}

.members-avatars {
	display: flex;
}

.small-avatar {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	margin-left: -10rpx;
	border: 2rpx solid #fff;
}

.small-avatar:first-child {
	margin-left: 0;
}

.item {
	display: flex;
	justify-content: space-between;
}

.card {
	width: 95vw;
}
</style>
